<template>
	<view>
		<view class="page-section">
			<search-bar :clearable="true" :showCamera="true" :value="searchText" @confirm="search"
				@input="inputSearchText"></search-bar>
		</view>
		<view class="dividingLine"></view>
		<view class="searchRecordsBackground">
			<text class="searchRecordsText">历史搜索记录</text>
			<view class="deleteBackground" @tap="deleteSearchRecords">
				<uni-icons type="trash-filled" class="deleteImg" size="28"></uni-icons>
			</view>

			<view class="searchRecordsTextBackground">
				<view class="searchRecordsClass" v-for="(item, index) in searchRecords" :key="item.id" @>
					<text :decode="true" class="searchRecordsInputText"
						@tap="setSearchRecords(item.id,index)">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import SearchBar from '@/components/SearchBar.vue'
	export default {
		components: {
			SearchBar
		},
		data() {
			return {
				searchText: null,
				searchRecords: [],
				searchFlag: false,
				//搜索记录标志位
				listFlag: false,
				focusFlag: false,
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			this.openLocationSearch();
			this.setValue(options.text)
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {

			/**
			 * 微信搜索跳转的接口函数
			 * */
			setValue(value){
				this.searchText=value
			},
			valueSearch(value){
				 let that = this
				 let content = value
				 if (content.length == 0) {
				 	return;
				 } else {
				 	var flag1 = false;
				 	var index = 0;
				 	for (var i = 0; i < that.searchRecords.length; i++) {
				 		if (content == that.searchRecords[i].name) {
				 			flag1 = true;
				 			index = i;
				 		}
				 	}
				 	if (!flag1) {
				 		var searchData = that.searchRecords;
				 		searchData.unshift({
				 			id: searchData.length,
				 			name: content
				 		});
				 		uni.setStorageSync('foodSearchText', searchData);
				 	} else {
				 		that.searchRecords.splice(index, 1)
				 		var searchData = that.searchRecords;
				 		searchData.unshift({
				 			id: searchData.length,
				 			name: content
				 		});
				 		uni.setStorageSync('foodSearchText', searchData);
				 	}
				 	that.setData({
				 		searchFlag: true,
				 		listFlag: true
				 	});
				 }
				 uni.navigateTo({
				 	url: "/pages/health/food/results/results?text=" +content
				 }) 
			 },
			search(res) {
				this.valueSearch(res.value)
			},
			setSearchRecords: function(id, index) {
				this.searchText = this.searchRecords[index].name
				this.focusFlag = true
				this.valueSearch(this.searchText)
			},
			inputSearchText: function(e) {
				this.searchText = e
			},
			openLocationSearch: function() {
				this.setData({
					searchRecords: uni.getStorageSync('foodSearchText') || [],
					searchFlag: true,
					listFlag: true
				});
			},
			deleteSearchRecords() {
				uni.removeStorageSync('foodSearchText');
				this.setData({
					searchRecords: [],
					searchFlag: false,
					listFlag: false
				});
			}
		}
	};
</script>
<style>
	@import './search.css';
</style>
